<template>
  <main class="bg-[#E8DCCA] font-song relative overflow-x-hidden min-h-screen">
    <!-- 顶部统计区域 -->
    <TopStatistics
      :title="contestTitle"
      :subtitle="contestSubtitle"
      :total-works="totalWorks"
      :award-works="awardWorks"
    />

    <!-- 专家评语区域 -->
    <ExpertReview
      :review-text="expertReviewText"
      @show-full-review="showContactCard = true"
    />

    <!-- 联系客服弹窗 -->
    <ContactModal
      :visible="showContactCard"
      @close="showContactCard = false"
      @contact="handleContact"
    />

    <!-- 作品详情 -->
    <WorkDetail
      :work-title="workData.title"
      :author="workData.author"
      :category="workData.category"
      :create-time="workData.createTime"
      :award-level="workData.awardLevel"
      @share="shareWork"
    />

    <!-- 评论区域 -->
    <CommentSection
      :initial-comments="initialComments"
      @comment-submitted="handleCommentSubmitted"
    />
  </main>
</template>

<script setup>
import { ref, onMounted } from "vue";
import TopStatistics from "./components/TopStatistics.vue";
import ExpertReview from "./components/ExpertReview.vue";
import ContactModal from "./components/ContactModal.vue";
import WorkDetail from "./components/WorkDetail.vue";
import CommentSection from "./components/CommentSection.vue";

// 响应式数据
const showContactCard = ref(false);

// 比赛信息
const contestTitle = ref("韶华墨韵书画艺术大赛");
const contestSubtitle = ref("传承千年文化，展现时代风采");
const totalWorks = ref(355);
const awardWorks = ref(99);

// 专家评语
const expertReviewText = ref(
  "此作品笔法娴熟，章法布局合理，体现了深厚的书法功底。作者在传统基础上融入个人理解，展现出独特的艺术风格。整体气韵生动，墨色浓淡相宜，字里行间透露出作者对传统文化的深刻理解和现代审美的巧妙结合，实为难得佳作。"
);

// 作品数据
const workData = ref({
  image: "@/assets/images/shufa_01.jpg",
  title: "沁园春雪选段",
  author: "胡浩",
  category: "书法作品",
  createTime: "2024年12月",
  awardLevel: "特等奖"
});

// 初始评论数据
const initialComments = ref([
  {
    id: 1,
    username: "书法爱好者",
    avatar: "https://picsum.photos/40/40?random=1",
    time: "2小时前",
    content: "这幅作品真的很棒！笔法流畅，意境深远，体现了作者深厚的书法功底。",
  },
  {
    id: 2,
    username: "墨香雅韵",
    avatar: "https://picsum.photos/40/40?random=2",
    time: "5小时前",
    content: "字体结构严谨，章法布局合理，是一幅难得的佳作。期待看到更多这样的作品。",
  },
  {
    id: 3,
    username: "文化传承者",
    avatar: "https://picsum.photos/40/40?random=3",
    time: "1天前",
    content: "传统与现代的完美结合，既保持了古典韵味，又融入了时代特色，值得细细品味。",
  },
]);

// 滚动条重置
onMounted(() => {
  window.scrollTo(0, 0);
});

// 事件处理函数
const handleContact = () => {
  // 联系客服逻辑
  alert("联系客服功能待实现");
};

const shareWork = () => {
  // 分享功能
  alert("分享功能待实现");
};

const handleCommentSubmitted = (comment) => {
  // 处理新评论提交
  console.log("新评论提交:", comment);
};
</script>

<style scoped>
/* 自定义样式 */
.bg-paper {
  background-color: #f5f5dc;
}

.bg-lightgold {
  background-color: #f0e68c;
}

.text-ink {
  color: #2c2c2c;
}

/* 两行文字限制 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em; /* 2行的高度 */
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transform {
  animation: fadeIn 0.3s ease-out;
}
</style>
